<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./images/batman-logo-01.png">

  <title>黑暗骑士的网站</title>

  <link rel="stylesheet" href="./css/flex.css">


</head>

<body>

  <!-- 原始对照组 -->
  <div class="border-box">
    <div class="border-box">1111</div>
    <div class="border-box">2222</div>
    <div class="border-box">3333</div>
    <div class="border-box">4444</div>
    <div class="border-box">5555</div>
  </div>

  <!-- 压力布局1 -->
  <div class="border-box flex-box1">
    <div class="border-box">1111</div>
    <div class="border-box">2222</div>
    <div class="border-box">3333</div>
    <div class="border-box">4444</div>
    <div class="border-box">5555</div>
  </div>

  <!-- 压力布局2 -->
  <div class="border-box flex-box2">
    <div class="border-box">1111</div>
    <div class="border-box">2222</div>
    <div class="border-box">3333</div>
    <div class="border-box">4444</div>
    <div class="border-box">5555</div>
  </div>

  <!-- 压力布局3 -->
  <div class="border-box flex-box3">
    <div class="border-box">1111</div>
    <div class="border-box">2222</div>
    <div class="border-box">3333</div>
    <div class="border-box">4444</div>
    <div class="border-box">5555</div>
  </div>

  <!-- 压力布局4 -->
  <div class="border-box flex-box4">
    <div class="border-box">1111 <br> aaaa <br> bbbb </div>
    <div class="border-box">2222</div>
    <div class="border-box">3333</div>
    <div class="border-box">4444 <br> 黑暗骑士 </div>
    <div class="border-box">5555</div>
  </div>


  <!-- 压力布局5 -->
  <div class="border-box flex-box5">
    <div class="border-box flex2">1111</div>
    <div class="border-box">2222</div>
    <div class="border-box flex1">3333</div>
    <div class="border-box flex3">4444</div>
    <div class="border-box">5555</div>
  </div>

  <!-- 压力盒子6 -->
  <div class="border-box flex-box6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>



</body>

</html>